<template>
	<view class="relative outer">
		<!-- #ifdef APP-PLUS -->
		<u-gap bgColor="transparent" height="15"></u-gap>
		<!-- #endif -->
		<!-- 头部 -->
		<view class="margin relative py-5">
			<view class="flex justif-between">
				<view class="left">
					<view class="flexflex" @click="cityChoiceEvent">
						<u-icon name="map-fill" color="#7976e9"></u-icon>
						<view class="size_14" style="width: 84rpx; color: #161616; margin: 10rpx 10rpx">
							{{ city }}
						</view>
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
				<view class="middle">
					<view class="search_ss">
						<u-search style="font-size: 28rpx;" :showAction="false" placeholder="" disabled
							@click="$pub.go('/pages_home/search/search')" v-model="keyword" :clearabled="true"
							searchIconColor="#7976E9" borderColor="#DDDDDD" bgColor="#ffffff">
						</u-search>
					</view>
				</view>
				<!-- addShowChange -->
				<view class="right" @click="onLongPress">
					<view class="">
						<u-icon name="plus-circle" size="62rpx" color="#7976e9"></u-icon>
					</view>
				</view>
				<!--  -->
			</view>
		</view>

		<!-- swiper -->
		<view class="swiper margin">
			<u-swiper :list="list5" @change="(e) => (current = e.current)" :autoplay="false" imgMode="scaleToFill">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<!--  -->
		<u-gap bgColor="transparent" height="10"></u-gap>
		<!-- 慢病开药 -->
		<view class="three margin" style="margin-bottom: 30rpx">
			<view class="flex">
				<!-- -->
				<view class="group groupList" @click="$pub.go(item.url)" v-for="(item, index) in groupList"
					:key="index">
					<image class="flex-cen mt10" mode="aspectFit" :src="item.img" alt=""
						style="width: 124rpx; height: 88rpx" />
					<h3 class="size_18">{{ item.name }}</h3>
					<view class="grey size_12 ms10">
						{{ item.dec }}
					</view>
				</view>
				<!--  -->
			</view>
		</view>
		<!--  -->
		<u-gap bgColor="#f5f5f5" height="10"></u-gap>
		<!-- 道纪中医 -->
		<view class="bg-white p-10">
			<view class="p-5" style="background: #fdf8f2">
				<view class="  ">
					<!-- 标题 -->
					<view class="mb-10" style="display: flex; justify-items: center; align-items: center">
						<view class="left-line ml10 mr10"></view>
						<h3 class="size_17">道纪中医</h3>
					</view>
					<!-- 内容 -->
					<view class=" ">
						<u-row :gutter="10">
							<u-col :span="4">
								<view class="item flex-column bg-white px-5 pt-5"
									@click="$pub.go(`/pages_home/lock/lock?cc=1639582486947217409`)"
									style="border-radius: 15rpx">
									<view class="mb-3 size_14 font-b"> 名医问诊 </view>
									<view class="mb-5 size_12"> 全国名医 </view>
									<view class="flexflex flex-end">
										<image class="" style="width: 60rpx; height: 60rpx"
											src="/static/img/home/04-mingyi.png" mode="heightFix"></image>
									</view>
								</view>
							</u-col>
							<u-col :span="4">
								<view class="item flex-column bg-white px-5 pt-5"
									@click="$pub.go(`/pages_home/kecheng/kecheng`)" style="border-radius: 15rpx">
									<view class="mb-3 size_14 font-b"> 名家课堂 </view>
									<view class="mb-5 size_12"> 国学课堂 </view>
									<view class="flexflex flex-end">
										<image class="" style="width: 60rpx; height: 60rpx"
											src="/static/img/home/05-mingjia.png" mode="heightFix"></image>
									</view>
								</view>
							</u-col>
							<u-col :span="4">
								<view class="item flex-column bg-white px-5 pt-5"
									@click="$pub.go(`/pages_home/feiyi/feiyi`)" style="border-radius: 15rpx">
									<view class="mb-3 size_14 font-b"> 非遗验方 </view>
									<view class="mb-5 size_12"> 非遗验方 </view>
									<view class="flexflex flex-end">
										<image class="" style="width: 80rpx; height: 60rpx"
											src="/static/img/home/06-feiyi.png"></image>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
					<!--  -->
					<view class="my-10" style="display: flex; justify-items: center; align-items: center">
						<view class="left-line ml10 mr10"></view>
						<h3 class="size_17">生活有道</h3>
					</view>
					<!--  -->
					<view class="py-8 px-2 bg-white">
						<u-row>
							<u-col :span="2" v-for="(item, index) in consultCate" :key="index">
								<view @click="
                    $pub.go(
                      `/pages_home/articleList/articleList?data=${encodeURIComponent(
                        JSON.stringify(item)
                      )}`
                    )
                  " class="item group groupImgs" :style="{ background: `url(${item.img})` }">
									<view class="pCenter" style="padding: 14rpx">
										<view class="size_14">
											{{ item.name }}
										</view>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>

		<!-- 间隙 -->
		<u-gap bgColor="#f5f5f5" height="10"></u-gap>

		<!-- 咨询 -->
		<view class="news margin">
			<image class="point1" v-if="false" src="/static/img/home/12-zhongyi.png" mode="widthFix"
				style="width: 142rpx; height: 142rpx"></image>
			<image class="point2" v-if="false" src="/static/img/home//13-yunji.png" mode="widthFix"
				style="width: 142rpx; height: 142rpx"></image>

			<view style="
          display: flex;
          justify-items: center;
          align-items: center;
          padding-top: 30rpx;
        ">
				<view class="left-line ml10 mr10"></view>
				<h4 class="size_16">资讯</h4>
			</view>
			<view v-if="consult.length">
				<!-- 列表 -->
				<view class="item ml10" @click="
            $pub.go(
              `/pages_home/articleDetail/articleDetail?data=${val.informationId}`
            )
          " v-for="(val, index) in consult" :key="index">
					<!-- 					<view class="title size_16">
						{{ val.title }}
					</view> -->
					<u-text :lines="1" :text="val.title ">
						{{ val.title }}
					</u-text>
					<u-gap height="5"></u-gap>
					<view class="content size_14 text-ellipsis">
						{{ val.content }}
					</view>
					<view class="time size_12" style="padding: 12rpx 0 30rpx 0">
						{{ val.createTime || "2023-11-03" }}
					</view>
				</view>
			</view>
			<u-empty v-else mode="news"></u-empty>
		</view>

		<!--  -->
		<!-- 气泡 -->
		<view class="shade" v-show="showShade" @tap="hidePop">
			<view class="pop" :style="popStyle" :class="{ show: showPop }">
				<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{ item }}
				</view>
			</view>
		</view>


	</view>
</template>




<script>
	import {
		checkOpenGPSServiceByAndroid
	} from "@/utils/device.js";
	import message from "api/message/message";

	import env from '@/utils/env.js'
	// #ifdef MP
	const citySelector = requirePlugin("citySelector");
	// #endif

	export default {
		data() {
			return {
				/* 弹窗按钮列表 */
				popButton: ["扫一扫", "二维码", "加好友"],
				/* 显示遮罩 */
				showShade: false,
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1,
				/* 显示操作弹窗 */
				showPop: false,
				/* 按钮组需要参数 */
				queryData: null,
				/* map */
				mapData: {
					type: "2",
					userId: uni.getStorageSync("userInfo").userid,
					x: 0,
					y: 0,
				},
				cid: null,
				/* 切换 */
				addShow: false,

				/* 视频 */
				videoList: [],
				/* feiyi */
				feiyiList: [],

				/* 生活有道 */
				sList: [{
						img: "http://storage.dezhoucloud.com/img/home/07-jiankang.png",
						name: "健康预测",
					},
					{
						img: "http://storage.dezhoucloud.com/img/home/08-shiling.png",
						name: "时令养生",
					},
					{
						img: "http://storage.dezhoucloud.com/img/home/09-jiuzhong.png",
						name: "九种体质",
					},
					{
						img: "http://storage.dezhoucloud.com/img/home/10-zhongyi.png",
						name: "中医急救",
					},
					{
						img: "http://storage.dezhoucloud.com/img/home/11-gengduo.png",
						name: "知识库存",
					},
					{
						img: "http://storage.dezhoucloud.com/img/home/07-jiankang.png",
						name: "常见病例",
					},
					{
						img: "/static/img/home/11-gengduo.png",
						name: "更多",
					},
				],
				addSipu: {
					img: "/static/img/home/10-zhongyi.png",
					name: "知 识 库 ",
				},
				/*道纪中医  */
				zList: [{
						img: "/static/img/home/04-mingyi.png",
						name: "名医问诊",
						dec: "全国名医在线答",
						url: "/pages/home/wenzhen/wenzhen",
					},
					{
						img: "/static/img/home/05-mingjia.png",
						name: "名家课堂",
						dec: "国学课堂",
						url: "/pages/home/ketang/ketang",
					},
					{
						img: "/static/img/home/06-feiyi.png",
						name: "非遗验方",
						dec: "非遗验方",
						url: "/pages/home/yifang/yifang",
					},
				],
				/* 慢病开药 */
				groupList: [{
						img: "/static/img/home/01-manbing.png",
						name: "慢病开药",
						dec: "10~22点在线",
						url: "/pages_home/manbing/manbing",
					},
					{
						// 54735
						img: "/static/img/home/02-siyi.png",
						name: "私医访",
						dec: "出院患者随访",
						url: "/pages_home/siyi/siyi",
					},
					{
						// 54699
						img: "/static/img/home/03-wenzen.png",
						name: "一键问诊	",
						dec: "在线问专家",
						url: "/pages_home/oneClickConsultation/oneClickConsultation",
					},
				],
				talkList: [],
				/* 搜索 */
				keyword: "疾病、医生+城市、医院等",
				/* swiper */
				list5: [],
				current: 0,
				/* 列表 */
				indexList: [],
				yishenList: [],
				urls: [
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/2.jpg",
					"https://cdn.uviewui.com/uview/album/3.jpg",
					"https://cdn.uviewui.com/uview/album/4.jpg",
					"https://cdn.uviewui.com/uview/album/5.jpg",
					"https://cdn.uviewui.com/uview/album/6.jpg",
					"https://cdn.uviewui.com/uview/album/7.jpg",
					"https://cdn.uviewui.com/uview/album/8.jpg",
					"https://cdn.uviewui.com/uview/album/9.jpg",
					"https://cdn.uviewui.com/uview/album/10.jpg",
				],
				/*  */
				videoSrc: "/static/video.mp4",
				poster: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d8b642e310d48ccbcd58481b0289e15~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?",
				lastClickTime: 0,
				videoContext: "",
				doctorList: "",
				videoUrl: "http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4",
				compid: uni.getStorageSync("compid"),
				/* zx */
				consult: [],
				consultCate: [],
				/* 城市 */
				city: '北京',
				/*  */
			};
		},
		onLoad() {
			/* gps */
			this.getGps();


		},
		onShow() {
			this.cid = getApp().globalData.cid;
			this.loadmore();
			this.getWindowSize()


			// #ifdef MP
			/* city */
			this.cityChange()
			// #endif


			/* 生活有道 */
			this.getZixunCate();
			/* 视频 */
			// this.getVideo();
			/* 广告 */
			this.advertising();
			/* 资讯更多 */
			this.getZixun()
		},
		onUnload() {
			// 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
			// #ifdef MP
			citySelector.clearCity();
			// #endif

		},
		onReady() {
			this.videoContext = uni.createVideoContext("video", this);
		},
		mounted() {},
		methods: {
			/* 长按监听 */
			onLongPress(e, payload) {
				console.log(e, "payload")
				let [touches, style, index] = [
					e.touches[0],
					"",
					e.currentTarget.dataset.index,
				];
				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > this.winSize.height / 2) {
					style = `bottom:${this.winSize.height - touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > this.winSize.witdh / 2) {
					style += `right:${this.winSize.witdh - touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}
				/* 传递id */
				this.queryData = payload;
				this.popStyle = style;
				this.pickerUserIndex = Number(index);
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			/* 选择菜单 */
			pickerMenu(e) {
				let that = this;
				console.log(e, "e item");
				let index = Number(e.currentTarget.dataset.index);
				console.log(`第${this.pickerUserIndex + 1}个用户,第${index + 1}个按钮`);
				console.log(this.queryData, "queryData");
				console.log(index, "index");

				switch (index) {
					case 0:
						// this.TOP_CONVERSATION(this.queryData.id);
						that.qrCode()
						break;
					case 1:
						that.$pub.go('/pages_home/qrCode/qrCode')
						// this.CANCEL_TOP_CONVERSATION(this.queryData.id);
						break;
					case 2:
						that.$pub.go('/pages_message/addFriend/addFriend')
						/* 删除会话 */
						// this.DELETE_CONVERSATION(this.queryData.id);
						/* 删除记录 */
						// this.DELETE_MessageList(this.queryData);
						/* 清除总数 */
						// this.decreaseTabBarNum(this.queryData.unreadCount);
						break;
					default:
						break;
				}
				/* 
						 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
						 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
						 */
				this.hidePop();
			},

			/* 隐藏弹窗 */
			hidePop() {
				this.showPop = false;
				this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 250);
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							witdh: res.windowWidth,
							height: res.windowHeight,
						};
					},
				});
			},
			/* 列表触摸事件 */
			listTap(data) {
				/* 因弹出遮罩问题，所以需要在遮罩弹出的情况下阻止列表事件的触发 */
				if (this.showShade) {
					return;
				}
				console.log("列表触摸事件触发");

			},

			/* 加号显示 */
			addShowChange() {
				// this.addShow = !this.addShow;
			},


			/*  */
			cityChange() {
				const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象，若未选择返回null
				/*  */
				let city = uni.getStorageSync('city')
				/*  */
				if (city) {
					this.city = city
				}
				console.log(selectedCity, "selectedCity")
				if (selectedCity) {
					uni.setStorageSync('city', selectedCity.fullname)
					this.city = selectedCity.name
					let mapOjb = {
						x: selectedCity.location.latitude,
						y: selectedCity.location.longitude,
					}
					uni.setStorageSync('map', mapOjb)
				}

			},
			/*  */
			cityChoiceEvent(e) {
				// console.log(e, "e");
				uni.setStorageSync("urbanization", 1)

				let key = env.key;
				let referer = env.referer;
				let hotCitys = "深圳";

				console.log(env, "env")
				// &hotCitys=${hotCitys}

				setTimeout(() => {
					wx.navigateTo({
						url: `plugin://citySelector/index?key=${key}&referer=${referer}`,
					});
				}, 1000);
			},

			//  上传位置
			async getMap() {
				let re = await this.$API.mapApi.coordinate(this.mapData);
				console.log('api');
			},



			/* 定位 */
			getGps(e) {
				let that = this;
				uni.getLocation({
					type: "wgs84",
					accuracy: "best",
					success: function(res) {
						let map = {
							x: res.longitude,
							y: res.latitude,
						};

						console.log(res, "resLocation");
						that.mapData.x = res.longitude;
						that.mapData.y = res.latitude;
						uni.setStorageSync("map", map);
						console.log(map, "gpsSucess");
						that.getMap();
					},
					fail: function(err) {
						console.log("gpsFalse");
						// #ifdef APP-PLUS
						checkOpenGPSServiceByAndroid();
						// #endif

					},
				});
			},


			/* 广告 */
			advertising() {
				this.request({
					url: "/devertisement/select",
				}).then((res) => {
					console.log(res, "res");
					if (res.data) {
						/* 资讯接口 */
						this.list5 = res.data.map((i) => {
							return 'http://storage.dezhoucloud.com/img/home/homeBanner.png';
						});
					}
				});
			},
			/* 扫码 */
			qrCode() {
				var that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					success: async function(res) {
						console.log("扫码结果", res);
						console.log("条码类型：" + res.scanType);
						console.log("条码内容：" + res.result);
						// let phone = res.result
						// let re = await that.$API.userApi.phoneFindUser(phone)
						// let id = re.userId
						// let applyData = {
						// 	ucomeFrom: '2',
						// 	udescription: '1手机号 2二维码 3圈子',
						// 	ufriendId: id,
						// }
						// let ree = await that.$API.friendApi.applyAddFriend(applyData)
						// uni.showToast({
						// 	title: 'sucess',
						// })
						console.log(ree, "ree");
						// that.applyAddFriend(ids);
					},
				});
			},


			/* 视频 */
			async getVideo() {
				this.request({
					url: `/video/selectVideo?countVideo=${3}`,
				}).then((res) => {
					this.videoList = res.data;
				});
			},
			/* 资讯 */
			async getZixun() {
				console.log("资讯");
				this.request({
					url: "/information/list",
				}).then((res) => {
					console.log(res, "res");
					/* 资讯接口 */
					this.consult = res.data.list;
				});
			},

			/* 生活有道 资讯分类 */
			async getZixunCate() {
				this.request({
					url: "/information/category/list",
				}).then((res) => {
					/* 资讯接口 */
					this.consultCate = res.rows;
					this.consultCate = this.consultCate.map((i) => {
						this.sList.forEach((n) => {
							if (n.name == i.name) {
								i["img"] = n.img;
							}
						});
						return i;
					});
				});
			},
			getList() {
				this.request({
					url: "/employee/app/list",
				}).then((res) => {
					console.log(res, "resList");
				});
			},
			playVedio() {
				uni.createVideoContext("video", this).requestFullScreen();
				screen.orientation.lock("landscape");
			},
			screenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.stop();
				}
			},
			// 退出全屏时，停止播放
			fullscreenchange(e) {
				console.log(e.detail.fullScreen, "e.detail.fullScreen");
				if (!e.detail.fullScreen) {
					this.videoContext.stop();
				}
			},
			scrolltolower() {
				this.loadmore();
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)],
					});
				}
			},
		},
	};
</script>






<style lang="scss" scoped>
	@import "./home.scss";

	/* #ifdef MP */
	::v-deep .u-search__content__input {
		font-size: 28rpx !important;
	}

	/* #endif */



	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					background-color: #f3f3f3;
				}
			}
		}
	}

	/* */

	.groupImgs {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
	}

	/* 扫一扫 */
	.tip {
		width: 168rpx;
		// height: 314rpx;
		height: 160rpx;
		background: #4c4c4c;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		// translate: -70% 5%;
	}

	#video {
		width: 100%;
		height: 500rpx;
	}

	page {
		// background-color: #ffffff;
	}

	.doctor {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		// text-align: center
	}

	/* 自定义指示器 */

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}

	.search_ss {
		::v-deep .uni-input-input {
			font-size: 28px;
		}
	}
</style>